import type { VxeGridProps } from '@vben/plugins/vxe-table';

import type { DescItem } from '#/components/description';

import { DictEnum } from '@vben/constants';

import { Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

import { renderDict } from '#/utils/render';

dayjs.extend(duration);
dayjs.extend(relativeTime);

function renderTags(list: string[]) {
  return (
    <div class="flex flex-row flex-wrap gap-0.5">
      {list.map((item) => (
        <Tag key={item}>{item}</Tag>
      ))}
    </div>
  );
}

export const descSchema: DescItem[] = [
  {
    field: 'saleProductName',
    label: '销售产品',
  },
  {
    field: 'saleNum',
    label: '销售数量',
  },
  {
    field: 'saleAmount',
    label: '销售额',
  },
  {
    field: 'saleDeptName',
    label: '销售店铺',
  },
  {
    field: 'saleUserName',
    label: '销售人员',
  },
  {
    field: 'customerName',
    label: '服务客户',
  },
  {
    field: 'saleOrderTime',
    label: '销售时间',
  },
  {
    field: 'isGift',
    label: '是否评点',
    render: (_, record) => {
      return renderDict(record.isGift, DictEnum.SYS_YES_NO);
    },
  },
  {
    field: 'giftProductName1',
    label: '评点产品1',
  },
  {
    field: 'giftNum1',
    label: '评点数量1',
  },
  {
    field: 'giftProductName2',
    label: '评点产品2',
  },
  {
    field: 'giftNum2',
    label: '评点数量2',
  },
  {
    field: 'giftProductName3',
    label: '评点产品3',
  },
  {
    field: 'giftNum3',
    label: '评点数量3',
  },
];

// Table
export const columns: VxeGridProps['columns'] = [
  {
    title: '商品',
    field: 'saleProductName',
    width: 170,
  },
  {
    title: '商品类型',
    field: 'productType',
    width: 100,
    slots: {
      default: ({ row }) => {
        return renderDict(row.productType, DictEnum.HM_PRODUCT_TYPE);
      },
    },
  },
  {
    title: '退货数量',
    field: 'returnNum',
    width: 100,
  },
  {
    title: '退款金额',
    field: 'refundAmount',
    width: 100,
    cellRender: {
      name: 'CellColorAmount',
      props: { color: 'blue' },
    },
    footerFormatter: ({ itemValue }) => {
      return `${itemValue / 10} 元`;
    },
  },
  {
    title: '退货时间',
    field: 'applyTime',
  },
];
